<template>

  <div class="person-list">
    <div class="container">
      <div class="setting-area glo-content-area">
      <div class="btns glo-btn-group">
          <Button
            type="primary"
            @click="showCreate"
            v-if="allPermissions.roleAdd"
          >{{$t('permissionsIndex.roleAdd')}}</Button>
        </div>
        <div class="title">{{$t('permissionsIndex.roleTitle')}}</div>




      </div>

      <div class="glo-search-area">
        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{$t('permissionsIndex.roleTableName')}}</div>
          <Input
            v-model="personName"
            :placeholder="$t('permissionsIndex.roleNameSel')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>

      </div>

      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        :current="page"
        show-sizer
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />

    </div>
    <RoleEdit
      v-if="ifCreate"
      @close="closeCreate"
    />
    <RoleEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
  </div>
</template>

<script>
import {
  mapState,
} from 'vuex'
import $ from 'jquery'
import _ from 'lodash'
import {
  getList,
  del,
} from '@/api/Role.js'
import {
  getPhoto,
} from '@/api/public.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

import RoleEdit from './RoleEdit'
import RoleSettings from './RoleSettings'

export default {
  mixins: [
    pageMixin,
  ],
  components: {
    RoleEdit,
  },

  data () {
    return {
      taggleListTrue: true,
      personName: '',
      selectionArr: [],
      list: [],
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('permissionsIndex.roleTableName'),
          minWidth: 140,
          key: 'roleName',
        },
        {
          title: this.$t('permissionsIndex.roleRemark'),
          key: 'remark',
          minWidth: 120,
          render: (h, { row }) => {
            let label = '-'
            if (row.remark) {
              label = row.remark
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('permissionsIndex.roleCreatTime'),
          key: 'createDate',
          minWidth: 120,
          render: (h, { row }) => {
            let label = '-'
            if (row.createDate) {
              label = row.createDate
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 120,
          render: (h, { row }) => {
            return h(RoleSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],
      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      allPermissions:{
        roleAdd:false,
        verListSettingsEdit1:false,
        verListSettingsDel1:false,
      },
    }
  },
  computed: {
    ...mapState('depart', [
      'selectedDepart',
    ]),
    btnShow () {
      return this.$store.state.btnShow
    },

  },

  watch: {
    selectedDepart: ['$_page_update'],
    btnShow () {
      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('permissionsIndex.roleTableName'),
          minWidth: 140,
          key: 'roleName',
        },
        {
          title: this.$t('permissionsIndex.roleRemark'),
          key: 'remark',
          minWidth: 120,
          render: (h, { row }) => {
            let label = '-'
            if (row.remark) {
              label = row.remark
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('permissionsIndex.roleCreatTime'),
          key: 'createDate',
          minWidth: 120,
          render: (h, { row }) => {
            let label = '-'
            if (row.createDate) {
              label = row.createDate
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 120,
          render: (h, { row }) => {
            return h(RoleSettings, {
              props: { row,allPermissions:this.allPermissions },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ]
      return this.$store.state.btnShow
    },
  },
  mounted () {
    this.$_page_update()
    this.getAllPermissions()
    console.log('getAllPermissions',this.allPermissions)
  },

  methods: {
    getAllPermissions(){
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#permissions'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#roleTitle'&&a.children){
              a.children.map(c=>{
              if(c.permission=='#roleAdd'&&c.checked==='true'){
                this.allPermissions.roleAdd=true
              }
              if(c.permission=='#verListSettingsEdit5'&&c.checked==='true'){
                this.allPermissions.verListSettingsEdit1=true
              }
              if(c.permission=='#verListSettingsDel5'&&c.checked==='true'){
                this.allPermissions.verListSettingsDel1=true
              }
            })} 
          })
        }
        
      });
    },
    showCreate () {
      this.ifCreate = true
    },
    closeCreate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifCreate = false
    },

    showUpdate (item) {
      this.ifUpdate = true
      this.editItem = item
    },
    closeUpdate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifUpdate = false
    },

    handleSelection (selection = []) {
      console.log(selection)
      // console.log(11111)
      this.selectionArr = selection
    },


    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
      }
    },


    async getData (query) {
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,
        roleName: this.personName,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {

        

        list = data.data
        page = data.pageNum || 1
        total = +data.count  //+字符串转数字
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
    },

    async handleDel (item) {
      this.$Modal.confirm({
        title: this.$t('permissionsIndex.roleDel'),
        content: this.$t('permissionsIndex.isRoleDel'),
        onOk: async () => {
          const { success } = await del({ id: item.id })
          if (success) {
            this.$Message.success(this.$t('permissionsIndex.roleDelSucc'))
            this.$_page_update()
          } else {
            this.$Message.error(this.$t('newDevices.delRoleTip'))
            // this.$Message.error(this.$t('permissionsIndex.roleDelHint'))
          }
        },
      })
    },

  },
}
</script>

<style lang="less" scoped>
.person-list {
  overflow: hidden;

  /deep/ .img-area {
    width: 100px;
    height: 100px;
    margin: 6px 0;
    box-sizing: content-box;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
.taggle{
  width: 100%;
  line-height:60px;
  background: white;
  font-size: 14px;
  
  padding-left:20px;
}
.taggle div{
  display: inline-block;
  cursor: pointer;
}
.cssAll{
  border: 1px solid #dcdee2;
  width: 250px;
  height: 32px;
  text-indent: 16px;
}
.nameCss{
  width: 75px;
  text-align: center;
}
.aloneCss{
  width: 100%;
  border: 1px solid #dcdee2;
  height: 32px;
  text-indent: 16px;
}
.btnCss{
    width: 140px;
    height: 32px;
    border: none;
    background-color: white;
    border: 1px solid #dcdee2;
    font-size: 13px;
    border-radius: 5px;
    line-height: 32px;
    color: #515a6e;
    position: relative;
    margin-top: 20px;
}
.btnCss img{
  position: relative;
  top: 4px;
}
.btnCss:hover{
  border-color: #2d8cf0;
}
.active{
      color: #2d8cf0;
}
.glo-content-area{
  position: relative;
}
.user-cut{
  position: absolute;
  top: 22px;
  left: 120px;
  cursor: pointer;
}
.alertTit{
  width: 90%;
  z-index: 10000;
  margin: -5px auto 10px;
  line-height: 14px;
}
</style>
